<template>
  <div class="grid grid-flow-col auto-cols-auto gap-4 p-8 bg-gray-100 overflow-x-auto">
    <!-- 内容宽度决定列宽，横向自动铺满 -->
    <div class="bg-blue-500 text-white px-4 py-8 rounded whitespace-nowrap">1</div>
    <div class="bg-blue-500 text-white px-12 py-8 rounded whitespace-nowrap">2 Longer Content</div>
    <div class="bg-blue-500 text-white px-2 py-8 rounded whitespace-nowrap">3</div>
    <div class="bg-blue-500 text-white px-24 py-8 rounded whitespace-nowrap">4 Very Very Long Item</div>
    <div class="bg-blue-500 text-white px-6 py-8 rounded whitespace-nowrap">5</div>
    <div class="bg-blue-500 text-white px-6 py-8 rounded whitespace-nowrap">6</div>
  </div>
</template>